const path = require('path')
    // 抽离html
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入vue-loader在 https://vue-loader.vuejs.org/zh/guide/ 找
const { VueLoaderPlugin } = require('vue-loader')
    // 抽离css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 全局环境变量
const process = require('process')
    // 构建进度条的插件
const webpackbar = require('webpackbar')
    // 代码热更新需要
const webpack = require('webpack')
    // 模拟数据
const Mock = require('mockjs')
const data = Mock.mock({
    // 轮播图数据
    'banner|5': [{
        img: '@image(100x100, @color)'
    }],
    // 猫眼电影数据
    'movie|5': [{
        text: '@ctitle',
        img: '@image(100x100, @color)',
        'num|5-10': 0,
    }],
    // 推荐民宿数据
    "house|6": [{
        text: '@ctitle',
        img: '@image(100x100, @color)',
        'price|99-999': 0,
        title: '@ctitle'
    }]
})


console.log('--------------', process.env.NODE_ENV);
module.exports = {
    // 入口
    entry: './src/index.js',
    output: {
        filename: "[name].[hash:6].bundle.js", // 唯一出口名
        path: path.join(__dirname, './dist'), // 出口文件夹
        clean: true, // 清空dist文件
    },
    plugins: [
        // 抽离html
        new HtmlWebpackPlugin({
            template: './src/index.html' // 指定模版
        }),
        // 配置vue的plugin
        new VueLoaderPlugin(),
        // 抽离css
        new MiniCssExtractPlugin({
            filename: 'style.css', // 指定打包后的结果
        }),
        // 进度条插件
        new webpackbar(),
        // 代码热更新
        new webpack.HotModuleReplacementPlugin({
            // Options...
        })
    ],
    // 根据打包命令判断环境变量
    mode: process.env.NODE_ENV == 'production' ? 'production' : 'development', // development  或 production
    module: {
        rules: [{
                test: /\.js$/, // es6转es5
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(scss|css|less|sass)$/, // 样式loader，从官网复制过来需要修改，至少应该支持scss css
                use: [{
                    loader: MiniCssExtractPlugin.loader // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }]
            },
            {
                test: /\.(png|jpg|git|eot|svg|ttf|woff|woff2)$/, // 图片图标loader，可以使用file-loader url-loader
                use: [{
                    loader: 'file-loader',
                    options: {}
                }]
            },
            // vue后缀的loader
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    // 配置有关目录的项
    resolve: {
        // 用于配置别名
        alias: {
            // 另起的名字： 想要替代的绝对路径
            css: path.resolve(__dirname, 'src/css'),
            img: path.resolve(__dirname, 'src/assert/img'),
        },
        // 省略后缀名， 默认是js json，匹配顺序从前往后
        extensions: ['.js', '.json', '.jpg'],
    },
    devServer: {
        host: 'localhost',
        port: 8081,
        open: true,
        hot: true,
        // compress: true
        before(app) {
            // 轮播图接口
            app.get('/banner', (req, res) => {
                    res.send(data.banner)
                })
                // 电影数据接口
            app.get('/movie', (req, res) => {
                    res.send(data.movie)
                })
                // 民宿接口
            app.get('/house', (req, res) => {
                res.send(data.house)
            })
        }
    },
    // devtool配置构建速度， eval快且支持
    // source-map 慢支持
    devtool: 'eval'
}